<template>
  <div
    class="drag-ball"
    draggable="true"
    @dragstart="dragstart($event)"
    @dragend="dragend($event)"
    :style="`right:${elRight}px;bottom:${elBottom}px`"
  >
    <button @click="drawer = true">
      E X P L O E
      <div id="clip">
        <div id="leftTop" class="corner"></div>
        <div id="rightBottom" class="corner"></div>
        <div id="rightTop" class="corner"></div>
        <div id="leftBottom" class="corner"></div>
      </div>
      <span id="rightArrow" class="arrow"></span>
      <span id="leftArrow" class="arrow"></span>
    </button>
    <div v-show="drawer">
      <el-input v-model="question">
      </el-input>
      <el-button @click="submit">查询</el-button>
    </div>
    <div v-show="ansDrawer" class="ans">
      <p>
        {{ ans }}
      </p>
    </div>


  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import axios from "axios";

  const startclientX = ref(500); //记录开始的横坐标位置
  const startclientY = ref(500); //记录开始的纵坐标位置
  const elRight = ref(100); //定位-初始位置
  const elBottom = ref(900); //定位-初始位置
  const drawer = ref(false);
  const ansDrawer = ref(false);
  const question = ref();
  const ans = ref();

  const submit = () =>{
    console.log(question.value);
    axios({
      method: 'get',
      url: 'http://127.0.0.1:4523/m1/3571383-0-default/api/wenxin',
      params: question.value,
    })
      .then((res) => {
        console.log('请求成功');
        ans.value = res.data["result"];
        drawer.value = false;
        ansDrawer.value = true
      })
      .catch((error) => {
        console.log('请求失败');
        console.log('error');
      });
  }

  // 拖拽开始事件
  const dragstart = (e: any) => {
    // 记录拖拽元素初始位置
    startclientX.value = e.clientX;
    startclientY.value = e.clientY;
  };
  // 拖拽完成事件
  const dragend = (e: any) => {
    console.log('eeeeee', e);
    let x = startclientX.value - e.clientX; // 计算偏移量
    let y = startclientY.value - e.clientY;
    elRight.value += x; // 实现拖拽元素随偏移量移动
    elBottom.value += y;
  };
</script>
<style scoped lang="scss">
  .drag-ball {
    cursor: pointer;
    position: absolute;
    width: 150px;
    height: 50px;
    //background: #a6c6ff;
    //box-shadow: 0px 6px 16px -8px rgb(0 0 0 / 8%), 0px 9px 28px 0px rgb(0 0 0 / 5%),
    //  0px 12px 48px 16px rgb(0 0 0 / 3%);
    border-radius: 23px;
    text-align: center;
    //color: #fff;
    line-height: 50px;
  }
  button {
    position: relative;
    width: 11em;
    height: 4em;
    outline: none;
    transition: 0.1s;
    background-color: transparent;
    border: none;
    font-size: 13px;
    font-weight: bold;
    color: #5cc6ef;
  }

  #clip {
    --color: #2761c3;
    position: absolute;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 5px double var(--color);
    box-shadow: inset 0px 0px 15px #195480;
    -webkit-clip-path: polygon(
      30% 0%,
      70% 0%,
      100% 30%,
      100% 70%,
      70% 100%,
      30% 100%,
      0% 70%,
      0% 30%
    );
  }

  .arrow {
    position: absolute;
    transition: 0.2s;
    background-color: #2761c3;
    top: 35%;
    width: 11%;
    height: 30%;
  }

  #leftArrow {
    left: -13.5%;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
  }

  #rightArrow {
    -webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);
    left: 102%;
  }

  button:hover #rightArrow {
    background-color: #27c39f;
    left: -15%;
    animation: 0.6s ease-in-out both infinite alternate rightArrow8;
  }

  button:hover #leftArrow {
    background-color: #27c39f;
    left: 103%;
    animation: 0.6s ease-in-out both infinite alternate leftArrow8;
  }

  .corner {
    position: absolute;
    width: 4em;
    height: 4em;
    background-color: #2761c3;
    box-shadow: inset 1px 1px 8px #2781c3;
    transform: scale(1) rotate(45deg);
    transition: 0.2s;
  }

  #rightTop {
    top: -1.98em;
    left: 91%;
  }

  #leftTop {
    top: -1.96em;
    left: -3em;
  }

  #leftBottom {
    top: 2.1em;
    left: -2.15em;
  }

  #rightBottom {
    top: 45%;
    left: 88%;
  }

  button:hover #leftTop {
    animation: 0.1s ease-in-out 0.05s both changeColor8, 0.2s linear 0.4s both lightEffect8;
  }

  button:hover #rightTop {
    animation: 0.1s ease-in-out 0.15s both changeColor8, 0.2s linear 0.4s both lightEffect8;
  }

  button:hover #rightBottom {
    animation: 0.1s ease-in-out 0.25s both changeColor8, 0.2s linear 0.4s both lightEffect8;
  }

  button:hover #leftBottom {
    animation: 0.1s ease-in-out 0.35s both changeColor8, 0.2s linear 0.4s both lightEffect8;
  }

  button:hover .corner {
    transform: scale(1.25) rotate(45deg);
  }

  button:hover #clip {
    animation: 0.2s ease-in-out 0.55s both greenLight8;
    --color: #030365;
  }

  @keyframes changeColor8 {
    from {
      background-color: #2781c3;
    }

    to {
      background-color: #27c39f;
    }
  }

  @keyframes lightEffect8 {
    from {
      box-shadow: 1px 1px 5px #27c39f;
    }

    to {
      box-shadow: 0 0 2px #27c39f;
    }
  }

  @keyframes greenLight8 {
    from {
    }

    to {
      box-shadow: inset 0px 0px 32px #27c39f;
    }
  }

  @keyframes leftArrow8 {
    from {
      transform: translate(0px);
    }

    to {
      transform: translateX(10px);
    }
  }

  @keyframes rightArrow8 {
    from {
      transform: translate(0px);
    }

    to {
      transform: translateX(-10px);
    }
  }
  .ans{
    background-color: #eff7ff;
  }
</style>
